<template>
  <div>
    <div>
      <el-form ref="form" :model="form" label-width="80px">

        <el-form-item label="公寓名称">
          <el-select v-model="value" filterable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="businessName"
        label="公寓名称"
        width="120">

      </el-table-column>

      <el-table-column
        label="注册日期"
        width="120">

        <template slot-scope="scope">
           <span v-if="scope.row.register_date!=null">
                {{ scope.row.register_date }}
          </span>
          <span v-if="scope.row.register_date==null">
                -
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="register_capital"
        label="注册资本(万元)"
        width="120">

      </el-table-column>
      <el-table-column
        prop="credit_staus"
        label="授信状态"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.credit_staus==1">
               已授信
          </span>
          <span v-if="scope.row.credit_staus==null">
                未授信
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="hl_total_creditline"
        label="总授信额度(元)"
        width="120">

      </el-table-column>
      <el-table-column
        prop="hl_used_creditline_percent"
        label="总已用额度(%)"
        width="120">

      </el-table-column>
      <el-table-column
        prop="hl_surplus_creditline"
        label="总剩余可用额度(元)"
        width="120">

      </el-table-column>
      <el-table-column
        prop="hl_monthly_total_creditline"
        label="月授信额度(元)"
        width="120">

      </el-table-column>
      <el-table-column
        prop="hl_monthly_used_creditline_percent"
        label="月可用额度(%)"
        width="120">

      </el-table-column>
      <el-table-column
        prop="hl_monthly_surplus_creditline"
        label="月剩余可用额度(元)"
        width="120">

      </el-table-column>
      <el-table-column
        prop="company_name"
        label="资金方名称"
        width="120">

      </el-table-column>
      <el-table-column
        label="上次修改日期"
        width="120">
        <template slot-scope="scope">
           <span v-if="scope.row.update_time!=null">
               {{ scope.row.update_time }}
          </span>
          <span v-if="scope.row.update_time==null">
                -
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="100">

          <template slot-scope="scope">
          <span v-if="scope.row.credit_staus==1">
               <el-button
                 size="mini"
                 @click="handleEdit(scope.row)">编辑</el-button>
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          </span>
           <span v-if="scope.row.credit_staus==null">
               <el-button @click="sx(scope.row)" type="text" size="small">授信</el-button>
          </span>
          </template>

      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="param.pageNum"
      :limit.sync="param.pageSize"
      @pagination="getList"
    />

    <el-upload
      class="avatar-uploader"
      action="http://localhost/dev-api/risk/credit/upload"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>

    <el-button type="primary" @click="onSubmit">预览</el-button>

    <!-- 修改-->
    <div>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%">

        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="公寓名称">
            <el-input disabled v-model="form.name"></el-input>
          </el-form-item>

          <el-form-item label="注册日期">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>

          <el-form-item label="总授信额度(元)">
            <el-input v-model="form.name"></el-input>
          </el-form-item>

          <el-form-item label="月授信额度(元)">
            <el-input v-model="form.name"></el-input>
          </el-form-item>

          <el-form-item label="总已用额度(%)">
            <el-input disabled v-model="form.name"></el-input>
          </el-form-item>

          <el-form-item label="月已用额度(%)">
            <el-input disabled v-model="form.name"></el-input>
          </el-form-item>

          <el-form-item label="总剩余额度(元)">
            <el-input  disabled v-model="form.name"></el-input>
          </el-form-item>

          <el-form-item label="月剩余额度(元)">
            <el-input disabled  v-model="form.name"></el-input>
          </el-form-item>

          <template>
            <el-table
       :data="tableData"
              ref="multipleTable"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">

              <el-button @click="addDomain">+</el-button>
              <el-table-column
                prop="name"
                label="资金方名称"
                width="120">

              </el-table-column>
              <el-table-column
                prop="address"
                label="资金方产品名称"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
              prop="name"
              label="总资金方额度(万)"
              width="120">
            </el-table-column>
              <el-table-column
                prop="name"
                label="总资金方剩余额度(万)"
                width="120">
              </el-table-column>
              <el-table-column
                prop="name"
                label="月资金方额度(万)"
                width="120">

              </el-table-column>
              <el-table-column
                prop="name"
                label="月资金方剩余额度(万)"
                width="120">
              </el-table-column>
              <el-table-column
                prop="name"
                label="资方识别码"
                width="120">
              </el-table-column>
            </el-table>
            <el-table-column label="操作">

            </el-table-column>


          </template>

        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </el-form>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import { lineList, getMenu, delMenu, addMenu, updateMenu } from "@/api/risk/login";
export default {
  data() {
    return {
      imageUrl: '',
      tableData: [],
      multipleSelection: [],
      form: {},
      options: [],
      value: '',
      img:'',
      param: {
        pageSize: 10,
        pageNum: 1,
        c:null,

      },
      total:0,
      dialogVisible: false,

    }
  },
  created() {
    this.getList();
  },
  methods: {
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: '',
        key: Date.now()
      });
    },
    handleEdit(row){
        this.dialogVisible=true;
    },
    onSubmit() {
      let Base64 = require('js-base64').Base64
      window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(this.img)));
    },
    getList() {
      this.loading = true;
      lineList(this.param).then(response => {
        console.log(response);
         this.tableData=response.rows;
          this.total = response.total;

        }
      );
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleAvatarSuccess(res, file) {
      console.log(file.response)
      this.img=file.response
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
